<template>
	<view class="page">
		<l-painter css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)" 
				@fail="fail"
				@done="done"
				pathType="url"
				ref="poster"
				performance
				>
			<l-painter-image :src="userInfo.avatar"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/>
			<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
				<l-painter-text :text="userInfo.nickName" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
				<l-painter-text :text="userInfo.account==null ? '暂无手机号': userInfo.account" css="color: rgba(255,255,255,.7); font-size: 24rpx"/>
			</l-painter-view>
			<l-painter-view css="align-items:center ;flex: 1;">
				<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image :src="promotionCode"  css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;"/>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
		<view class='save-poster' @click="save">保存到手机</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	// #ifdef MP
	import {base64src} from '@/utils/base64src.js'
	import {getQrcode} from '@/api/api.js';
	// #endif
	export default {
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data: () => ({
			picture: '',
			show: false,
			promotionCode:"",
		}),
		onShow() {
			uni.showLoading({
				title: '海报生成中',
				mask: true
			});
			this.getQrcode();
		},
		methods: {
			close() {
				this.show = false
			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				uni.hideLoading();
			},
			// 小程序二维码
			getQrcode() {
				let that = this;
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				let data = {
					id: that.id,
					path: ''
				}
				getQrcode(data).then(res => {
					that.promotionCode = res.data;
				}).catch(err => {
					that.errT = err;
				});
			},
			save() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						this.picture = res.tempFilePath
						this.saveImage();
					},
					fail(e) {
						console.log('???????????',e)
					}
				})
			},
			// 保存图征
			saveImage() {
				let that = this;
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: that.picture,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
					fail() {
						uni.showToast({
							title: '保存失败',
							icon: 'error',
							duration: 2000
						});
					}
				});
				// #endif
				// #ifdef MP
				uni.getSetting({
					url:that.picture,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
							}
						});
					}
				})
				// #endif
			}
		}
	};
</script>

<style lang="scss" scoped>
	.save-poster {
		background-color: #df2d0a;
		font-size: ：22rpx;
		color: #fff;
		text-align: center;
		height: 76rpx;
		line-height: 76rpx;
		width: 100%;
		margin-top: 10rpx;
	}
</style>
